<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/tow.css">
</head>

<body>
    <div class="container">
        <div class="img1">
            <img src="./img/t2.png" alt="">
        </div>
        <div class="img2">
            <img src="./img/t3.png" alt="">
        </div>
        <div class="img3">
            <img src="./img/t5.png" alt="">
        </div>
        <div class="img4">
            <img src="./img/t6.png" alt="">
        </div>
        <div class="img5">
            <img src="./img/t4.png" alt="">
        </div>
    </div>
    <div class="bg1">
        <img class="qwe" src="./img/t10.png" alt="">
        <img src="./img/q4.png" alt="">
    </div>
    <div class="bg2">
        <img class="qwe" src="./img/t10.png" alt="">
        <img src="./img/q1.png" alt="">
    </div>
    <div class="bg3">
        <img class="qwe" src="./img/t10.png" alt="">
        <img src="./img/q5.png" alt="">
    </div>
    <div class="bg4">
        <img class="qwe" src="./img/t10.png" alt="">
        <img src="./img/q2.png" alt="">
    </div>
    <div class="bg5">
        <img class="qwe" src="./img/t10.png" alt="">
        <img src="./img/q3.png" alt="">
    </div>

    <script>
        let img1 = document.querySelector('.img1');
        let img2 = document.querySelector('.img2');
        let img3 = document.querySelector('.img3');
        let img4 = document.querySelector('.img4');
        let img5 = document.querySelector('.img5');

        let bg1 = document.querySelector('.bg1');
        let bg2 = document.querySelector('.bg2');
        let bg3 = document.querySelector('.bg3');
        let bg4 = document.querySelector('.bg4');
        let bg5 = document.querySelector('.bg5');

        // img1的点击事件
        img1.addEventListener('click', function () {
            bg1.style.animation = 'grow 0.3s ease-in-out 0s 1 forwards';
        });
        bg1.addEventListener('click', function () {
            bg1.style.animation = 'growa 0.3s ease-in-out 0s 1 forwards';
        });

        // 2
        img2.addEventListener('click', function () {
            bg2.style.animation = 'grow2 0.3s ease-in-out 0s 1 forwards';
        });
        bg2.addEventListener('click', function () {
            bg2.style.animation = 'growa2 0.3s ease-in-out 0s 1 forwards';
        });

        // 3
        img3.addEventListener('click', function () {
            bg3.style.animation = 'grow 0.3s ease-in-out 0s 1 forwards';
        });
        bg3.addEventListener('click', function () {
            bg3.style.animation = 'growa 0.3s ease-in-out 0s 1 forwards';
        });

        // 4
        img4.addEventListener('click', function () {
            bg4.style.animation = 'grow 0.3s ease-in-out 0s 1 forwards';
        });
        bg4.addEventListener('click', function () {
            bg4.style.animation = 'growa 0.3s ease-in-out 0s 1 forwards';
        });
        // 5
        img5.addEventListener('click', function () {
            bg5.style.animation = 'grow 0.3s ease-in-out 0s 1 forwards';
        });
        bg5.addEventListener('click', function () {
            bg5.style.animation = 'growa 0.3s ease-in-out 0s 1 forwards';
        });
    </script>
</body>

</html>